<template>
	<view class="flex-column">
		<view class="update-content">
			<image class="logo" mode="widthFix" src="../../../static/logo.png" />
			<view class="mainInfo">
				<text class="title">贝贝 &nbsp;|&nbsp; {{ latest }}</text>
				<text class="tip">\n发现新版本</text>
			</view>
			<text class="line" />
		</view>
		<view>
			<view class="infoContentTitle">
				<image class="infoPic" src="../../../static/images/icon/info-circle.png" />
				<text class="infoTitle">更新摘要</text>
			</view>
			<view class="infoContent">
				<text class="updateInfo">{{ updateInfo }}</text>
			</view>
		</view>
		<view>
			<view class="infoContentTitle">
				<image class="infoPic" src="../../../static/images/icon/sync.png" />
				<text class="infoTitle">更新大小</text>
			</view>
			<view class="infoContent">
				<text class="updateInfo">{{ packgeSize }}</text>
			</view>
		</view>
		
		<view class="minorContent bottom_aera">
			<view class="smallTitle">
				<text>下载进度:{{ downloadProgress }}%</text>
				<progress :percent="downloadProgress" activeColor="#007bff" stroke-width="4" />
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	let isIos = plus.os.name === 'iOS' ? 1 : 0;
	
	var downloadTask = null;
	var phone = null;
	
	if(isIos){
		phone = "ios";
	}else{
		phone = "android";
	}
	// #endif
	export default {
		data() {
			return {
				updateInfo: '无', // 更新摘要
				latest: null, // 版本信息
				packgeSize: null, // 更新包大小
				downloadProgress: 0, // 下载进度
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			var oldversion = this.$version;
			uni.request({
				url: 'http://mobile.suxin88.com:808/version.json?' +  Math.random() *10,
				success: (res) => {
					
					this.latest = res.data[phone].version;
					this.updateInfo = res.data[phone].info;
					console.log(this.updateInfo)
					if (isIos) {
						this.updatewgt(res.data[phone].wgturl);
						return;
					} else {
						if (res.data[phone].wgtupdate) {
							this.updatewgt(res.data[phone].wgturl);
						}else{
							this.updateall(res.data[phone].url);
						}
					}
				},
				
			})
			
			// #endif
		},
		methods: {
			updatewgt(url) {
				
				downloadTask = uni.downloadFile({
					url: url,
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							plus.runtime.install(downloadResult.tempFilePath, {
								force: false
							}, function() {
								
								
								console.log('install success...');
								plus.runtime.restart();
							}, function(e) {
							
								console.error('install fail...');
							});
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.packgeSize = "66M";
					this.packgeSize = (res.totalBytesExpectedToWrite / 1024 / 1024).toFixed(2) + "MB";
					this.downloadProgress = res.progress;
					
				
				});
				
			},
			updateall(url){
				downloadTask = uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							plus.runtime.openFile(res.tempFilePath, {}, function() {
								uni.showToast({
									title: '安装失败',
									duration: 2000
								});
							});
						}
					}
				});
				
				downloadTask.onProgressUpdate((res) => {
					this.packgeSize = (res.totalBytesExpectedToWrite / 1024 / 1024).toFixed(2) + "MB";
					this.downloadProgress = res.progress;
					
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.update-content {
		width: 100vw;
		text-align: center;
	}

	.minorContent {
		width: 650upx;
		padding: 0 50upx;
	}

	.process {
		margin-top: 200upx;
		margin-left: 30%;
	}

	.logo {
		height: 182upx;
		width: 196upx;
		margin-top: 100upx;
	}

	.title {
		font-size: 36upx;
		color: #333;
		font-weight: bold;
	}

	.infoTitle {
		font-size: 32upx;
		color: #333;
		padding-left: 15upx;
		font-weight: bold;
	}

	.tip {
		font-size: 28upx;
		color: #707070;
		vertical-align: text-top;
	}

	.bottom_aera {
		position: absolute;
		bottom: 0;
		height: 12%;
	}

	.line {
		padding: 0 600upx;
		border-bottom: 2upx solid #707070;
	}

	.infoPic {
		height: 50upx;
		width: 50upx;
	}

	.infoContentTitle {
		display: flex;
		align-items: center;
		padding: 40upx 40upx;
	}

	.infoContent {
		display: flex;
		align-items: center;
	}

	.updateInfo {
		font-size: 28upx;
		
		
		color: #333;
		padding: 0 80upx;
	}

	.smallTitle {
		font-size: 26upx;
		font-weight: 500;
		padding: 20upx 0;
		line-height: 1.5;
		color: #888;
	}
</style>
